@extends('admin.common.main')

@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 用户中心
        <span class="c-gray en">&gt;</span> 权限列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    {{--消息提示--}}
    @include('admin.common.success')

    <div class="page-container">
        <form method="get" class="text-c">
            输入想要搜索的角色
            <input type="text" class="input-text" style="width:250px" placeholder="输入角色" value="{{ $sname }}" id="" name="search_name" autocomplete="off">
            <button type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜角色</button>
        </form>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="{{ route('admin.role.create') }}" class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i> 添加角色
            </a></span>
            <span class="r">共有数据：<strong>88</strong> 条</span>
        </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th width="100">角色名称</th>
                    <th width="100">查看权限</th>
                    <th width="130">加入时间</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($data as $item)
                    <tr class="text-c">

                        <td>{{ $item->id }}</td>
                        <td>{{ $item->name }}</td>
                        <td>
                            <a class="label label-success radius" href="{{ route('admin.role.node', $item) }}">权限</a>
                        </td>
                        <td>{{ $item->created_at }}</td>
                        <td class="td-manage">
                            <a href="{{ route('admin.role.edit', ['role' => $item->id]) }}" class="label label-warning radius ">修改</a>
                            <a href="{{ route('admin.role.destroy', ['id' => $item->id]) }}" class="label label-danger radius">删除</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            {{--        分页--}}
            {{ $data->render() }}
        </div>
    </div>
@endsection

@section('js')
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
<script>
    //生成一个token csrf
    const _token = "{{ csrf_token() }}"
    //给class delbtn删除按钮绑定事件
    $('.delbtn').click(function(evt) {
        let url = $(this).attr('href')
        //发起一个delete请求
        $.ajax({
            url,
            data: {_token},
            type:'DELETE',
            dataType:'json'
        }).then(({status, msg})=>{
            if (status == 0) {
                //删除此行
                $(this).parents('tr').remove()
                //提示插件  官网layer.layui.com
                layer.msg(msg, {time:2000, icon:1})
            }
        })
        //jquery取消默认事件直接返回false
        return false;
    })

    //全选/全不选
    $('#checkboxleader').change(function (evt) {
        if ($(this).prop("checked")) {
            $('input[name="id[]"]').prop("checked", true)
        } else {
            $('input[name="id[]"]').prop("checked", false)
        }
    })

    //全选删除
    const deleteAll = () => {
        let ids = $('input[name="id[]"]:checked')
        let send_ids = [];
        $.each(ids, (key, val)=> {
            //val是DOM, 转成jquery的元素再提取value值
            // send_ids.push($(val).val())
            //直接取DOM的value值
            send_ids.push(val.value);
        })
        if (send_ids.length > 0) {
            layer.confirm('确定全选删除？', {
                btn: ['确定删除', '取消']
            }, function () {

                // console.log(send_ids);

                $.ajax({
                    url: "{{ route('admin.user.delall') }}",
                    data: {ids: send_ids, _token: _token},
                    type: 'DELETE',
                    // dataType:'json'
                }).then(({status, msg}) => {
                    if (status == 0) {
                        //展示msg信息，并倒数800ms后刷新本页面
                        layer.msg(msg, {time:800, icon:1}, function() {
                            location.reload()
                        })
                    }
                })

            });
        }
    }
</script>
@endsection
